<template>
  <div id="tab-bar">
    <div class="tab-bar-item" @click="gohome">
      <!-- <router-link to="home" replace tag="none"> -->
      <img v-if="!isActive1" src="../assets/home.svg">
      <img v-else src="../assets/home-active.svg">
      <!-- <div :class="{active: isActive1}">首页</div> -->
    <!-- </router-link> -->
    </div>
    <div class="tab-bar-item" @click="gotask">
      <img v-if="!isActive2" src="../assets/task.svg">
      <img v-else src="../assets/task-active.svg">
    </div>
    <div class="tab-bar-item" @click="gocommunity">
    <!-- <router-link to="select" replace tag="none"> -->
      <img v-if="!isActive3" src="../assets/community.svg">
      <img v-else src="../assets/community-active.svg">
      <!-- <div :class="{active: isActive2}">社区</div> -->
    <!-- </router-link> -->
    </div>
    <div class="tab-bar-item" @click="goclockIn">
      <!-- <router-link to="category" replace tag="none" > -->
      <img v-if="!isActive4" src="../assets/clockIn.svg">
      <img v-else src="../assets/clockIn-active.svg">
      <!-- <div :class="{active: isActive3}">一起干嘛</div> -->
    <!-- </router-link> -->
    </div>
    <div class="tab-bar-item" @click="gocooperate">
      <!-- <router-link to="profile" replace tag="none"> -->
      <img v-if="!isActive5" src="../assets/cooperate.svg">
      <img v-else src="../assets/cooperate-active.svg">
      <!-- <div :class="{active: isActive4}">个人</div> -->
    <!-- </router-link> -->
    </div>
  </div>
</template>

<style scoped>
#tab-bar {
  display: flex;
  background-color: #f6f6f6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 -2px 1px rgb(100, 100, 100, 0.1);
}
.tab-bar-item{
  flex: 1;
  text-align: center;
  height: 49px;
  line-height: 49px;
}
.tab-bar-item img{
  width: 24px;
  height: 24px;
}
.active{
  color:rgb(185, 17, 129);
}
</style>

<script>
export default {
  name:"TabBar",
  props:{
    path:String
  },
  data(){
    return{
      isActive1: true,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActive5: false
    }
  },
  methods:{
    gohome(){
      // console.log("111")
      this.$router.replace('/home'),
      this.isActive1= true,
      this.isActive2= false,
      this.isActive3= false,
      this.isActive4= false,
      this.isActive5= false
    },
    gotask(){
      this.$router.replace('/task'),
      this.isActive1= false,
      this.isActive2= true,
      this.isActive3= false,
      this.isActive4= false,
      this.isActive5= false
    },
    gocommunity(){
      this.$router.replace('/community'),
      this.isActive1= false,
      this.isActive2= false,
      this.isActive3= true,
      this.isActive4= false,
      this.isActive5= false
    },
    goclockIn(){
      this.$router.replace('/clockIn'),
      this.isActive1= false,
      this.isActive2= false,
      this.isActive3= false,
      this.isActive4= true,
      this.isActive5= false
    },
    gocooperate(){
      this.$router.replace('/cooperate'),
      this.isActive1= false,
      this.isActive2= false,
      this.isActive3= false,
      this.isActive4= false,
      this.isActive5= true
    },
    // itemClick1(){
    //   this.isActive1=!this.isActive1
    // },
    // itemClick2(){
    //   this.isActive2=!this.isActive2
    // },
    // itemClick3(){
    //   this.isActive3=!this.isActive3
    // },
    // itemClick4(){
    //   this.isActive4=!this.isActive4
    // }
  },
  // compute: {
  //   isActive() {
  //     return this.$route.path.indexOf('/home')
  //   }
  // },
  // methods:{
  //   ItemClick(){
  //     console.log('click')
  //     this.$router.push(this.path)
  //   }
  // }
}
</script>